import { defineComponent, markRaw, ref } from 'vue'
import ItemNode from './ItemNode'
import classes from './ItemNode.module.css'
import { ElButton, ElColorPicker, ElImage, ElInput, ElText } from 'element-plus'
import { uploadFile, file2Base64 } from '../utils'
import { staticUrl } from '../request/request'

export default class ContainerNode extends ItemNode {
  isContainerNode = true

  constructor(node?) {
    super(node)

    if (!node) {
      const style = this.props.style

      this.props.style = {
        ...style,
        minWidth: '50px',
        minHeight: '16px',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        paddingTop: '5px',
        paddingRight: '5px',
        paddingBottom: '5px',
        paddingLeft: '5px'
        // overflow: 'hidden'
      }

      this.props.backgroundImage = ''
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props, { slots }) => {
          return () => (
            <pComponent
              class="container"
              style={{ backgroundImage: `url(${staticUrl(this.props.backgroundImage)})` }}
            >
              {slots.default?.()}
            </pComponent>
          )
        },
        {
          name: 'ContainerNode'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        this.props.style.border = '1px solid rgba(255, 255, 255, 0.15)'

        return () => (
          <pView>
            <this.component
              style={{
                flexShrink: '0',
                width: '100px',
                height: '50px',
                transform: 'scale(0.8)'
              }}
            ></this.component>
          </pView>
        )
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent((props, { slots }) => {
        return () => (
          <pParams>
            {() => [
              <div class={classes['params-item']}>
                <ElText class={classes['params-item-label']} type="info">
                  背景色
                </ElText>
                <div class={classes['params-item-content']}>
                  <ElColorPicker
                    modelValue={this.props.style.backgroundColor}
                    onUpdate:modelValue={(v) => (this.props.style.backgroundColor = v || '')}
                    show-alpha
                    size="small"
                    teleported={false}
                  ></ElColorPicker>
                </div>
              </div>,
              <div class={classes['params-item']}>
                <ElText class={classes['params-item-label']} type="info">
                  背景图片
                </ElText>
                <div class={classes['params-item-content']}>
                  {this.props.backgroundImage ? (
                    <>
                      <ElImage
                        style="width: 50px"
                        src={staticUrl(this.props.backgroundImage)}
                        fit="contain"
                      ></ElImage>
                    </>
                  ) : null}

                  <ElInput
                    v-model={this.props.backgroundImage}
                    placeholder="图片地址"
                    size="small"
                    clearable
                  ></ElInput>
                  <ElButton
                    type="primary"
                    size="small"
                    onClick={() => {
                      uploadFile((file) => {
                        file2Base64(file).then((res) => (this.props.backgroundImage = res))
                      })
                    }}
                  >
                    选择背景图
                  </ElButton>
                </div>
              </div>,
              slots.default?.()
            ]}
          </pParams>
        )
      })
    )
  }
}
